<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品页面</title>
    <script src="https://www.layuicdn.com/auto/layui.js" v="2.5.6" e="layui"></script>
    <link rel="stylesheet" href="static/css/style.css">
    <script src="https://cdn.bootcss.com/vue/2.5.10/vue.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="cvv">
    <!--顶栏-->
    <header>

        <div style="float: right">
            <i  class="layui-icon  layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 30px; color: #969baa;">&#xe614;</i>&nbsp; &nbsp; &nbsp;
        </div>
    </header>

    <div class="main" id="app">
        <!--左栏-->
        <div class="left">
            <ul class="cl" >
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;"  :class="{active:vo.active}"  @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active" class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)" v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
        <!--右侧-->
        <div class="right">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" id="userName" name="userName" class="layui-input" placeholder="请输入要查询的商品名" autocomplete="off">
                </div>
                <button class="layui-btn layui-btn-md layui-btn-normal" lay-submit lay-filter="queryUser">查询</button>
            </div>
            <table class="layui-hide" lay-filter="commTable" id="commTable"></table>
            <div style="display: none;" id="commToolBar">
                <button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
            </div>
            <div  id="commBar" style="display: none;">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </div>
        </div>
    </div>
</div>



<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
    <form action="" class="layui-form" method="post" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <div class="layui-dv">
                <label class="layui-form-label">名称:</label>
                <div class="layui-input-dv">
                    <input type="text" name="c_name"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-dv">
                <label class="layui-form-label">价格:</label>
                <div class="layui-input-dv">
                    <input type="text" name="c_price"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-dv">
                <label class="layui-form-label">库存量:</label>
                <div class="layui-input-dv">
                    <input type="text" name="stock"  autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-dv">
                <label class="layui-form-label">说明:</label>
                <div class="layui-input-dv">
                    <input type="text" name="c_show" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-dv">
                <label class="layui-form-label">类别:</label>
                <div class="layui-input-dv">
                <select name="category" lay-verify="">
                    <option value="">请选择商品类别</option>
                    <option value="饮料">饮料</option>
                    <option value="零食">零食</option>
                    <option value="工具">工具</option>
                </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="sub" lay-submit="">提交</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['layer','table','form'],function (){
        var layer=layui.layer;
        var table=layui.table;
        var form=layui.form;
            //基础效果




        table.render({
            elem: '#commTable'   //渲染的目标对象
            ,url:'/comm/selectcomm' //数据接口
            ,id:'contenttable'
            ,title: '商品'//数据导出来的标题
            ,toolbar: "#commToolBar"
            ,height:'full-350'
            ,cellMinWidth:100 //设置列的最小默认宽度
            ,limits: [3, 5, 10]  //一页选择显示3,5或10条数据
            , limit: 10  //一页显示10条数据
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                console.log(this);
                console.log(JSON.stringify(res));
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                }
                else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }
            ,done:function(res, curr, count){
            }
            ,page: true  //是否启用分页
            ,cols: [[   //列表数据
                {type: 'checkbox', fixed: 'left'}
                ,{field:'c_id', title:'', sort:true,align:'center'}
                ,{field:'c_name', title:'名称', sort:true,align:'center'}
                ,{field:'category', title:'类别', align:'center'}
                ,{field:'c_price', title:'价格(元)',align:'center'}
                ,{field:'c_show', title:'说明',align:'center'}
                ,{field:'stock', title:'库存量',align:'center'}
                ,{fixed: 'right', title:'操作', toolbar: '#commBar', width:220,align:'center'}
            ]]
        })


        //监听头部工具栏事件
        table.on("toolbar(commTable)",function(obj){
            switch(obj.event){
                case 'add':
                    openAddcomm();
                    break;
            }
        })



        //监听行工具事件
        table.on("tool(commTable)",function (obj){
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        url: "/comm/deletecommbyid",
                        type: "POST",
                        data: {'id': data.c_id},
                        dataType: "json",
                        success: function (data) {
                            if (data == null) {
                                layer.msg("删除失败", {icon: 5});
                            } else {
                                //删除这一行
                                obj.del();
                                //关闭弹框
                                layer.close(index);
                                layer.msg("删除成功", {icon: 6});
                                layer.closeAll();
                                parent.location.reload();
                                Load();
                            }
                        }
                    })
                });
            } else if (obj.event === 'edit') {
                openUpdatecomm(data);
            }
        });


        var cv;//自定义的，用来识别是添加还是修改
        var id;//用来传id
        var url;//地址
        var mainIndex;


        //打开添加弹出层
        function openAddcomm(data){
            mainIndex=layer.open({
                type:1,
                title:'添加商品',
                content:$("#saveOrUpdateDiv"),
                area:['1200px','600px'],
                success:function (index){
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                    url="/comm/addcomm";
                }
            })
        }

        //打开修改弹出层
        function openUpdatecomm(data){
            mainIndex=layer.open({
                type:1,
                title:'修改商品',
                content:$("#saveOrUpdateDiv"),
                area:['1200px','600px'],
                success:function (index){
                    form.val("dataFrm",data)
                    id=data.c_id;
                    url="/comm/updatecommbyid";
                    cv="1";
                }
            })
        }


        form.on('submit(sub)',function () {
            //序列化表单数据
            var params = $("#dataFrm").serialize();
            params = decodeURIComponent(params, true);
            if (cv==="1"){
                $.ajax({
                    type: "post",
                    url: url,
                    data: params+'&c_id='+id,
                    success: function (data) {
                        if (data.trim() === "1") {
                            layer.close(mainIndex)
                            setTimeout('window.location.reload()', 500)
                            layer.msg("修改成功")
                        } else {
                            layer.msg("修改失败")
                        }
                    }
                })
            }else {
            $.ajax({
                type: "post",
                url: url,
                data: params,
                success: function (data) {
                    if (data.trim() === "1") {
                        layer.close(mainIndex)
                        setTimeout('window.location.reload()', 500)
                        layer.msg("添加成功")
                    } else {
                        layer.msg("添加失败")
                    }
                }
            })
            }
        })



        //查询操作
        form.on('submit(queryUser)', function(data){
            var userName=$("#userName").val(); //得到搜索栏的值
            if (userName==''){
                setTimeout('window.location.reload()', 100);
            }
            //执行重载
            table.reload('contenttable', {
                url:'/comm/selectbycname',
                where: {cname:userName}     //传给后台数据并重载
            });
        });





    })

</script>
<script src="static/js/config.js"></script>
<script src="static/js/script.js"></script>
</body>
</html>